<template>
  <div id="list">
    <ul>
      <li v-for="item,index in users" :key="index" :class="{ active : currentSession ? item.username === currentSession.username : false }" @click="changeCurrentSession(item)">
        <!-- :class="[item.id === currentSession ? 'active':'']"   :class="{ active : item.id === currentSession }" -->
        <el-badge :is-dot="isDot[username + '#' + item.username]"><img class="avatar" :src="item.userface" :alt="item.name"></el-badge>
        <p class="name">{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      username: JSON.parse(window.sessionStorage.getItem('user')).username
    }
  },
  computed: {
    users() {
      return this.$store.state.chat.users
    },
    currentSession() {
      return this.$store.state.chat.currentSession
    },
    isDot() {
      return this.$store.state.chat.isDot
    }
  },
  methods: {
    changeCurrentSession: function(currentSession) {
      this.$store.commit('chat/changeCurrentSession', currentSession)
    }
  }
}
</script>

<style lang="scss" scoped>
#list {
  ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    padding: 0 10px;
    border-bottom: 1px solid #292C33;
    cursor: pointer;

    &:hover {
      background-color: rgba(255, 255, 255, 0.03);
    }
  }

  li.active {
    /* 注意这个是点.不是冒号: */
    background-color: rgba(255, 255, 255, 0.1);
  }

  .avatar {
    border-radius: 2px;
    width: 30px;
    height: 30px;
    vertical-align: middle;
  }

  .name {
    display: inline-block;
    margin-left: 15px;
  }
}
</style>
